<template>
  <BasicDrawer
    v-bind="$attrs"
    :isDetail="true"
    :showDetailBack="false"
    :destroyOnClose="true"
    @register="registerDrawer"
    width="70%"
  >
    <div>
      <Tabs :animated="true" size="large">
        <TabPane v-for="item in tabsList" :key="item.key" :tab="item.name">
          <Detail
            v-if="item.key == 'detail'"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
            :detailSchema="detailSchema"
            :detailData="detailData"
            @set-desc-data="setDescData"
          />
          <Attribute
            v-if="item.key == 'attribute'"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
          />
          <Telemetry
            v-if="item.key == 'telemetry'"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
          />
          <Alarm
            v-if="item.key == 'alarm'"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
          />
          <Event
            v-if="item.key == 'event'"
            :entityType="entityType"
            :entityId="entityId"
            :tenantId="tenantId"
            :isComponent="true"
          />
          <Association
            v-if="item.key == 'association'"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
          />
          <AuditLogs
            v-if="item.key == 'auditLogs'"
            :paramsId="{ entityType: entityType, id: entityId }"
          />
          <VersionControl
            v-if="item.key == 'version'"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
          />
          <component
            :is="item.key"
            :entityType="entityType"
            :entityId="entityId"
            :isComponent="true"
          />
        </TabPane>
        <slot name="customer-tabs"></slot>
      </Tabs>
    </div>
  </BasicDrawer>
</template>
<script setup lang="ts">
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { tabListData } from './index.data';
  import Detail from '../detail/index.vue';
  import Attribute from '../attributeTable/index.vue';
  import Telemetry from '../telemetryTable/index.vue';
  import Alarm from '../alarmTable/index.vue';
  import Event from '../eventTable/index.vue';
  import Association from '../associationTable/index.vue';
  import AuditLogs from '../SecurityModule.vue';
  import VersionControl from '../versionControl/index.vue';
  import { onMounted, ref } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  const props = defineProps({
    showTabs: {
      type: Array<string>,
      default: [
        'detail',
        'attribute',
        'telemetry',
        'alarm',
        'event',
        'association',
        'auditLogs',
        'version',
      ],
    },
  });
  const tabsList = ref(tabListData);
  const emit = defineEmits(['update-desc-data']);
  const entityType = ref<string>('');
  const entityId = ref<string>('');
  let tenantId = ref<string>('');
  const detailSchema = ref<any>();
  const detailData = ref<any>();
  const userStore = useUserStore();
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({
      title: data.title,
    });
    entityType.value = data.entityType;
    entityId.value = data.entityId;
    if (data.api && data.params && data.detailSchema) {
      // 详情处理
      detailSchema.value = data.detailSchema;
      detailData.value = data.api && (await data.api(data.params));
    } else if (data.record) {
      detailSchema.value = data.detailSchema;
      detailData.value = data.record;
    }
    if (props.showTabs.includes('event')) {
      tenantId.value = userStore.getUserInfo.tenantId.id;
    }
  });
  const setDescData = (value) => {
    emit('update-desc-data', value);
  };

  onMounted(() => {
    tabsList.value = tabsList.value.filter((item) => props.showTabs.includes(item.key));
  });
</script>

<style lang="less" scoped>
  :deep(.ant-tabs-nav) {
    margin: 0;
  }
</style>
